<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="领料详情" width="1000px">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <el-row>
      <div class="detailsTop">
        <span>生产领料详情单</span>
        <el-divider content-position="right">{{ ruleForm.pickNo }}</el-divider>
      </div>
      <div class="detailCont detailDialogFont threeDetailStyle">
        <ul>
          <li>
            <b>领料单号</b>
            <span>{{ ruleForm.pickNo }}</span>
          </li>
          <li>
            <b>申请人</b>
            <span>{{ ruleForm.applyName }}</span>
          </li>
          <li>
            <b>申请时间</b>
            <span>{{ ruleForm.applyDate }}</span>
          </li>
          <li>
            <b>申请数量</b>
            <span>{{ ruleForm.applyNum }}</span>
          </li>
          <li>
            <b>作业车间</b>
            <span>{{ ruleForm.factoryName }}</span>
          </li>
          <li>
            <b>来料数量</b>
            <span>{{ ruleForm.incomingNum }}</span>
          </li>
          <li class="oneHang">
            <b>备注</b>
            <span>{{ ruleForm.remark }}</span>
          </li>
        </ul>
      </div>
      <el-table border class="tabOver" stripe height="220px" :data="materialList">
        <el-table-column prop="materialId" label="物料" align="center">
          <template #default="{ row }">{{ row.materialName }} {{row.materialCode ? '【' + row.materialCode + '】':''}}</template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="100px" align="center" />
        <el-table-column prop="batch" label="批号" width="100px" align="center" />
        <el-table-column prop="wmsName" label="仓库名称" width="150px" align="center" />
        <el-table-column prop="outNum" label="出库数量" align="center" width="100px" />
        <el-table-column prop="outDate" label="出库时间" width="150px" align="center" />
        <el-table-column prop="userName" label="出库人" width="120px" align="center" />
      </el-table>
    </el-row>
    <bottom-font ref="bottomFont" :obj-name="ruleForm.applyName ? ruleForm.applyName : this.$store.getters.compInfo.userName" :obj-date="ruleForm.applyDate" />
  </el-dialog>
</template>
<script>
import bottomFont from '@/components/BottomFont'
export default {
  components: { bottomFont },
  props: {},
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      materialList: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.ruleForm = row
      this.getDetail(row.id)
      this.dialogVisible = true
    },
    /* 编辑获取详情 */
    async getDetail(id) {
      const res = await this.$axios.get(`/pro/pick/detail?id=${id}`)
      if (res.data.code === 200) {
        this.materialList = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
